<template>
  <div class="DanWei">
    <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin" class="titlebox"></TopTile>
    <div class="table">
      <TableColumn
        ref="tabledata"
        :tableData="tableData"
        :tableConfig="tableConfig"
        :issize="issize">
        <el-table-column
          prop="isPassed"
          label="是否通过">
          <template #default="{row}">
            <div class="farb">
              <span v-if="row.isPassed=='通过'" class="green tong"></span>
              <span v-else class="red tong"></span>
              {{ row.isPassed }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="isAccord"
          label="是否符合检查条件">
          <template #default="{row}">
            <div class="farb">
              <span v-if="row.isAccord=='符合'" class="green tong"></span>
              <span v-else class="red tong"></span>
              {{ row.isAccord }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="analysisDate"
          align="center"
          label="检查时间">
        </el-table-column>
        <el-table-column
          prop="resultExplain"
          label="检查结果">
          <template #default="{row}">
                  <el-popover
                    placement="bottom"
                    title=""
                    width="300"
                    trigger="click">
                      <div class="lines">检查结果</div>
                      <el-input
                      style="margin-top: 10px;"
                        type="textarea"
                        :rows="5"
                        placeholder=""
                        v-model="row.resultExplain">
                      </el-input>
                    <el-button type="text" slot="reference" class="yichu">{{ row.resultExplain }}</el-button>
                  </el-popover>
                </template>
        </el-table-column>
      </TableColumn>
    </div>
    <!-- 底部分页 -->
     <div class="fenye">
      <el-pagination
         background
         layout="prev, pager, next"
         :current-page.sync="pageobj.pageNo"
         :page-size="20"
         @current-change="getdatalist"
         :total="+totalCount">
      </el-pagination>
     </div>
  </div>
</template>

<script>
import {getdanweiyichangapi} from '@/api/system/AbnormalAnalysis'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
export default {
  name: 'CallPoliceDanWei',
  components: {
    TopTile,
    TableColumn
  },
  props: {
    companyNo: {
      type:Array
    },
    value2: {
      type:Array
    }
  },
  data() {
    return {
      issize: 'medium',
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '70' },
        { label: '用电企业', prop: 'companyName' },
        { label: '检查规则', prop: 'checkRule'},
      ],
      totalCount: '',
      pageobj: {
        pageNo: 1,
        pageSize: 20
      }
    };
  },

  mounted() {
    
  },

  methods: {
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading = true
      const { data: { list ,totalCount} } = await getdanweiyichangapi({
        companyNo: this.companyNo.join(','), fromDate: this.value2[0], toDate: this.value2[1],
        pageSize:this.pageobj.pageSize,pageNo:this.pageobj.pageNo-1
      })
      this.tableData=list
      this.totalCount=totalCount
      this.$refs.tabledata.loading = false
    },
    // 导出
    daochu() {
      exportexcel('pio-microservice-biz/pio/abnormal/analysis/companyDataAbnormal/exportExcel', {
        companyNo: this.companyNo.join(','), fromDate: this.value2[0], toDate: this.value2[1],
        pageSize:this.pageobj.pageSize,pageNo:this.pageobj.pageNo-1
      }, '单位数据异常')
    },
    // 刷新
    shuaxin () {
      this.getdatalist()
      this.$message.success('数据刷新成功')
    },
    // 调节表格密度
    command (val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
  },
};
</script>

<style scoped>
.DanWei{
  height: 100%;
  .titlebox{
    position: fixed;
    top: 120px;
    right: 40px;
  }
  .table{
    height: 94%;
    .yichu{
          width:100%;
          white-space: nowrap;
          text-align: left;
          overflow: hidden;  
          text-overflow: ellipsis; 
        }
    .farb{
      display: flex;
      align-items: center;
      .tong{
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin-right: 5px;
      }
      .green{
        background-color: #b8e412;
      }
      .red{
        background-color: red;
      }
    }

  }
  .fenye{
    text-align: right;
    margin-top: 10px;
  }
}
</style>